<template>
  <div class="layout">
    <!-- 自适应布局示例 -->
    <div class="adaptive-layout">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
    </div>

    <!-- 响应式布局示例 -->
    <div class="responsive-layout">
      <div class="desktop-content">这是桌面端显示的内容</div>
      <div class="mobile-content">这是移动端显示的内容</div>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加逻辑代码
</script>

<style scoped>
/* 自适应布局样式 */
.adaptive-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.box {
  /* flex属性解析:
   1 - flex-grow: 允许元素在需要时伸展
   1 - flex-shrink: 允许元素在需要时收缩
   calc(33.33% - 10px) - flex-basis: 元素的基础尺寸，减去间隙 
   */
  flex: 1 1 calc(33.33% - 10px);
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

/* 响应式布局样式 */
.responsive-layout {
  padding: 20px;
}

.desktop-content {
  display: block;
}

.mobile-content {
  display: none;
}

/* 媒体查询，当屏幕宽度小于 768px 时，显示移动端内容 */
@media (max-width: 768px) {
  .desktop-content {
    display: none;
  }

  .mobile-content {
    display: block;
  }
}
</style>